<template>
  <div class="book">
    <header>
      <h1>在线预约</h1>
    </header>
    <main>
      <div class="int">
        <h6>选择中心*</h6>
        <input type="text" name id placeholder="输入城市" v-model="Objvalue.city" />
      </div>
      <div>
        <h6>姓名*(姓名中有点,请点插入)</h6>
        <input type="text" name id placeholder="请输入...(必填)" v-model="Objvalue.name" />
      </div>
      <div>
        <h6>证件号码*</h6>
        <input type="text" name id placeholder="请输入...(必填)" v-model="Objvalue.number" />
      </div>
      <div>
        <h6>手机号*</h6>
        <input type="text" name id placeholder="请输入...(必填)" v-model="Objvalue.phone" />
      </div>
      <div>
        <h6>ID*</h6>
        <input type="text" name id placeholder="请输入...(必填)" v-model="Objvalue.id" />
      </div>
      <p>
        <button @click="next(Objvalue)">下一步</button>
      </p>
    </main>
  </div>
</template>

<script>
import axios from "../../utils/request";
export default {
  data() {
    return {
      selects: "选择中心",
      option: [
        { text: "选择中心", value: "选择中心" },
        { text: "上海", value: "上海" },
        { text: "北京", value: "北京" },
        { text: "苏州", value: "苏州" }
      ],
      Objvalue: {
        city: "",
        name: "",
        number: "",
        phone: "",
        id: ""
      },
      list: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    next(Objvalue) {
      axios({
        url: "api/book",
        method: "post",
        data: {
          city: Objvalue.city,
          name: Objvalue.name,
          number: Objvalue.number,
          phone: Objvalue.phone,
          id: Objvalue.id
        }
      }).then(res => {
        this.getList();
      });
    },
    getList() {
      axios({
        url: "/api/books",
        method: "post"
      }).then(res => {
        this.list = res.data.data;
      });
    }
  }
};
</script>

<style scoped>
.book {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  left: 0;
}
header {
  height: 300px;
  display: flex;
  justify-content: center;
  /* border: 1px solid #000; */
  background: linear-gradient(45deg, #0f7ef4, #1988f6, #34a0fd);
  border-bottom-right-radius: 100px;
  border-bottom-left-radius: 100px;
}
h1 {
  margin-top: 80px;
  color: #ffffff;
  font-size: 40px;
  font-weight: bold;
}
main {
  width: 310px;
  height: 400px;
  margin-left: 50px;
  border: 1px solid rgb(161, 161, 161);
  border-radius: 10px;
  position: absolute;
  top: 200px;
  background: #ffffff;
  -moz-box-shadow: inset 0 0 10px rgba(201, 214, 243, 1);
  -webkit-box-shadow: inset 0 0 -10px rgba(201, 214, 243, 1);
  box-shadow: inset 0 0 10px rgb(221, 221, 223);
}
main div {
  margin-left: 30px;
  margin-top: 20px;
}
main div input {
  width: 250px;
  height: 35px;
  border: 1px solid #cccccc;
}
.int {
  margin-top: 10px;
  margin-left: 30px;
}
.int select {
  width: 250px;
  height: 35px;
  border: 1px solid #cccccc;
}
main p button {
  width: 150px;
  height: 40px;
  margin-left: 70px;
  border: none;
  margin-top: 30px;
  background: #34a0fd;
  color: #ffffff;
}
</style>